"use client"

import { useState, useEffect } from "react"
import { CategoryFilter } from "@/components/filters/category-filter"
import {getAlbumGenres} from "@/lib/api-client";


interface AlbumCategoriesProps {
  selectedGenreId:string | number | null
  onGenreChange: (genreId: string | number | null) => void
}

export function AlbumCategories({ selectedGenreId, onGenreChange }: AlbumCategoriesProps) {
  const [genres, setGenres] = useState<{ id: number; name: string }[]>([])
  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
    const fetchGenres = async () => {
      try {
        setIsLoading(true)
        const response = await getAlbumGenres()

        if (response.success) {
          setGenres(response.data.genres || [])
        }
      } catch (error) {
        console.error("获取专辑分类失败:", error)
      } finally {
        setIsLoading(false)
      }
    }

    fetchGenres()
  }, [])

  if (isLoading) {
    return (
        <div className="animate-pulse">
          <div className="flex flex-wrap gap-2">
            {[...Array(6)].map((_, index) => (
                <div key={index} className="h-8 w-16 bg-muted rounded-full"></div>
            ))}
          </div>
        </div>
    )
  }

  return <CategoryFilter categories={genres} selectedId={selectedGenreId} onChange={onGenreChange} />
}

